<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登录</title>
    <link rel="shortcut icon" type="image/x-icon" href="{{asset(config('view.backend.theme.theme2').'/images/favicon.ico')}}">
    <link rel="stylesheet" type="text/css" href="{{asset(config('view.plugin').'/bootstrap/css/bootstrap.min.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset(config('view.backend.login.default').'/fonts/font-awesome-4.7.0/css/font-awesome.min.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset(config('view.backend.login.default').'/fonts/iconic/css/material-design-iconic-font.min.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset(config('view.backend.login.default').'/css/util.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset(config('view.backend.login.default').'/css/main.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset(config('view.plugin').'/layui/css/layui.css')}}">
</head>
<body>
<div class="limiter" id="app">
    <div class="container-login100" style="background-image: url({{asset(config('view.backend.login.default').'/images/bg-01.jpg')}})">
      <div class="wrap-login100 p-l-55 p-r-55 p-t-40 p-b-54" >
            <form class="login100-form validate-form"  method="post" id="loginForm">
                <span class="login100-form-title p-b-40">登录</span>
                {{csrf_field()}}
                <div class="wrap-input100 validate-input m-b-23" data-validate="请输入用户名">
                    <span class="label-input100">用户名</span>
                    <input class="input100" type="text" name="username" placeholder="请输入用户名" autocomplete="off">
                    <span class="focus-input100" data-symbol="&#xf206;"></span>
                    <span class="error-input100"></span>
                </div>

                <div class="wrap-input100 validate-input m-b-23" data-validate="请输入密码">
                    <span class="label-input100">密码</span>
                    <input class="input100" type="password" name="pass" placeholder="请输入密码">
                    <span class="focus-input100" data-symbol="&#xf190;"></span>
                    <span class="error-input100"></span>
                </div>

                <div class="wrap-input100 validate-input m-b-10" data-validate="请输入验证码">
                    <span class="label-input100">验证码</span>
                    <input class="input100" type="text" name="captcha" placeholder="请输入验证码">
                    <span class="focus-input100" data-symbol="&#xf190;"></span>
                    <span class="error-input100"></span>
                </div>
                <div class="wrap-input100" style="border-bottom: none;">
                    <img id="refresh"
                         style="cursor: pointer;margin-top: 10px;width: 100%;height:60px;
                                border: solid #d9d9d9 4px;border-radius: 5px;"
                         src="{{captcha_src()}}" alt="captcha" title="点击刷新验证码"
                         onclick="loginMod.refreshCaptcha(this)"
                    />
                </div>
                <div class="text-right p-t-8 p-b-31">
                    <a href="javascript:layer.alert('处于安全考虑,不提供找回密码功能,如有需要,请联系开发人员处理！')" >忘记密码？</a>
                </div>

                <div class="container-login100-form-btn">
                    <div class="wrap-login100-form-btn">
                        <div class="login100-form-bgbtn"></div>
                        <button type="button" class="login100-form-btn"
                                data-params='{"formId":"loginForm","url":"{{route('b_Login_login')}}"}'
                                onclick="loginMod.submit(this)"
                        >登 录</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="{{asset(config('view.plugin').'/jquery/jquery-3.2.1.min.js')}}"></script>
<script src="{{asset(config('view.plugin').'/layui/layui.all.js')}}"></script>

<script>
    var loginMod = (function () {
        var init = function () {
            $('.wrap-input100>input').focus(function () {
                if($(this).parents('.wrap-input100').hasClass('wrap-input-danger')){
                    $(this).parents('.wrap-input100').removeClass('wrap-input-danger');
                    $(this).siblings('.error-input100').text('');
                }
            });
        }
        var refreshCaptcha = function (obj) {
            $(obj).attr('src','{{captcha_src()}}?t='+Math.random());
        };
        var submit = function(obj){
            if(!validate()){
                return false;
            }
            var load = layer.load(2);
            var params = $(obj).data('params');
            var data = $('#'+params.formId).serialize();
            $.ajax({
                type: 'post',
                url: params.url,
                dataType: 'json',
                data: data
            }).done(function (response) {
                if(response.status){
                    tooltips(response.msg,6);
                    setTimeout(function () {
                        location.href = response.url;
                    }, 2000);
                }else{
                    tooltips(response.msg,5);
                }
            }).fail(function (XMLHttpRequest) {
                switch (XMLHttpRequest.status) {
                    case 422:
                        var errors = XMLHttpRequest.responseJSON.errors;
                        if(typeof errors == 'object') {
                            for (var index in errors) { // 不推荐这样
                                $('input[name='+index+']').parents('.wrap-input100').addClass('wrap-input-danger');
                                $('input[name='+index+']').siblings('.error-input100').text(errors[index][0]);
                            }
                        }else{
                            layer.msg(XMLHttpRequest.responseJSON.msg,{icon: 5});
                        }
                        break;
                    case 500:
                        layer.msg('服务器内部错误',{icon: 5});
                        break;
                    default:
                        layer.msg('网络错误,请稍后再试!',{icon: 5});
                }

            }).always(function () {
                refreshCaptcha($('#refresh'));
                layer.close(load);
            });
        };
        var tooltips = function (msg,icon) {
            layer.msg(msg,{icon: icon,shade:0.5});
        };
        var validate = function (){
            var res = true;
            $('.validate-input').each(function () {
                var iptVal =$(this).children('input').val();
                if(!iptVal){
                    $(this).addClass('wrap-input-danger');
                    $(this).children('.error-input100').text('不能为空');
                    res = false;
                    return false;
                }
            })
            return res;
        };
        return {
            refreshCaptcha:refreshCaptcha,
            submit:submit,
            init:init
        }
    })();
    loginMod.init();
</script>
</body>
</html>